<template>
  <div class="m-martin__table__contain">
    <table class="m-martin__table">
      <thead>
        <tr>
          <th v-for="(th, index) in tableProp" :key="index">{{th.name}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(tr, index) in tableData" :key="index">
          <td v-for="(th, i) in Object.keys(tr)" :key="i" v-html="tr[th]">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'MartinTable',
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      },
      required: false
    },
    tableProp: {
      type: Array,
      default() {
        return []
      },
      required: false
    }
  }
}
</script>

<style scoped>
.m-martin__table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.m-martin__table tr {
  height: 48px;
  border-bottom: 1px solid #e5e5e5;
}
.m-martin__table tr:hover {
  background: rgba(157, 243, 236, 0.4);
}
.m-martin__table tr td, th {
  text-align: center;
}
</style>

<style>
.m-martin__table tr img {
  display: block;
  width: 50px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 auto;
  border: 1px solid #e5e5e5;
}
</style>
